<template>
  <div style="display: flex; align-items: center">
    <div style="width: 140px; font-weight: 700">输入防抖时间：</div>
    <el-input-number
      v-model="time"
      style="width: 240px"
      placeholder="请输入防抖时间（毫秒）"
      :min="1000"
      :max="10000"
      :controls="false"
      @change="handleChange"
    />
  </div>
  <XButton style="margin-top: 15px" color="#626aef" :time="time" @click="exportExcel">导出</XButton>
  <XButton text type="warning" tip="warning" icon="Star" />
  <XButton
    text
    type="danger"
    tip="danger"
    icon="Delete"
    :tip-props="{
      effect: 'light',
      placement: 'bottom'
    }"
  />
</template>
<script setup>
import XButton from '@/components/XButton/index.vue'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
const time = ref(1000)
const handleChange = val => {
  alert('输入框的值：', val)
}
const exportExcel = () => {
  alert('点击事件')
  ElMessage({
    message: '点击事件',
    type: 'success'
  })
}
</script>
